<!-- 弹窗组件 -->
<template>
  <div class="my-dialog">
    <el-dialog v-model="dialogShow" :title="dialogForm.title" :before-close="onBeforeClose" :width="dialogForm.width">
      <div class="my-dialog__box">
        <slot name="dialogBox"></slot>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onBeforeClose" :loading="loading" size="large">取 消</el-button>
          <el-button type="primary" @click="onConfirm" :loading="loading" size="large">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang='ts'>
import { ref, watch, computed } from 'vue'
import { useStore } from '@/store'
const store = useStore()
//监听加载
const loading = computed(() => {
  return store.getters['loading/getLoad']
})
const dialogShow = ref<boolean>(false)
interface PropsDialog {
  dialogVisible: boolean;//弹窗是否出现
  dialogForm: {
    width?:string,//弹窗宽度
    title: string;//弹窗标题
  }
}
const props = withDefaults(defineProps<PropsDialog>(), {
  dialogVisible: false,
  dialogForm: () => ({
    title: '弹窗'
  })
});
const emit = defineEmits(['listenClose', 'listenConfirm'])
//监控弹窗是否出现
watch(
  () => props.dialogVisible,
  () => {
    dialogShow.value = !dialogShow.value
  }
)
//关闭
const onBeforeClose = () => {
  // debugger
  if(!loading.value){
    emit('listenClose')
  }
}
//确定
const onConfirm = () => {
  store.commit('loading/setLoad', true)//加载中 防止暴击
  emit('listenConfirm')
}
</script>
<style scoped lang='scss'>
.my-dialog {
  &__box {
    max-height: 60vh;
    overflow-x: initial;
    overflow-y: auto;
  }
}
</style>
<style lang='scss'>
.el-dialog {
  border-radius: 6px !important;

  .el-dialog__header {
    border-radius: 6px 6px 0 0 !important;
    // background-color: #e8eaec !important;
    margin-right: 0;
    padding: 10px 20px 0 20px;
    line-height: 44px;
    text-align: center;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 15px 20px;
  }

  .el-dialog__footer {
    // border-top: 1px solid #e8eaec !important;
    padding: 15px 20px;
    text-align: center;
  }

  .el-dialog__headerbtn {
    top: 0;
    right: 0;
    height: 54px;
    line-height: 54px;

    .el-dialog__close {
      color: #999;
      margin-top: 20px;
    }
  }
}
</style>
